<template>
  <view>
    <!--#ifdef APP-PLUS-->
    <view class="lz-status_bar">
      <view class="lz-top_view"></view>
    </view>
    <!--#endif-->
    <view class="index-head">
      <view class="index-head-top"
            @tap="$navigateBack">
        <view class="index-head-l">
          <view class="iconfont icon-zuojiantou"></view>
        </view>
        <view class="index-head-m">学习进度</view>
      </view>
    </view>
    <view class="index-tiku">
      <view class="index-content-qy">
        <block v-for="(item, index) in h5_study_record" :key="index">
          <view class="video-content" @tap="goto_qiye_detail(item)">
            <image class="video-content-img" :src="item.cover"></image>
            <view class="video-content-flex">
              <view>
                <view class="video-content-h1">{{item.title}}</view>
              </view>
              <view class="video-content-learn">
                <view class="video-content-price">
                  <view style="display:flex;align-items: center"><view>完成课时：</view><view style="color:#f12927">{{item.complete_num}}/{{item.total_num}}</view></view>
                </view>
              </view>
            </view>
          </view>
        </block>
      </view>
      <no-recode :show="is_recode1"></no-recode>
    </view>

  </view>
</template>
<script>
import { mapState } from "vuex";
import noRecode from "@/components/no-recode.vue";

export default {
  data() {
    return {
      unit_list: [[],[],[]],
      h5_study_record: []
    };
  },
  onShow() {
    this.get_learn_progress();
  },
  mounted() {},
  computed: {
    ...mapState(["subject"]),
    is_recode(){
      return (this.unit_list[this.current_index].length  === 0)
    },
    is_recode1(){
      return (this.h5_study_record.length  === 0)
    }
  },
  components: {
        noRecode
		},
  methods: {
    //题库学习进度
    async get_learn_progress() {
      // xuexijindudetail
      let res = await this.$myHttp.post({
        url: this.$myHttp.urlMap.tikuxuexijindudetail,
        data: {
          subject_id: this.subject.id
        },
        needLogin: true
      });
      if (res.code === 1) {
        let rows = res.msg.data || [];
        for (let i = 0, leng = rows.length; i < leng; i++) {
          rows[i].buy_time = this.$myUtils.$common.formatDate(
            rows[i].buy_time * 1000,
            "Y年M月D日"
          );
        }
        this.$set(this.unit_list,0,res.msg.data || [])
      }
    },
		goto_detail(item) {
			this.$openrul('/src/pages/questionBank/detail/index?library_id=' + item.id + '&from_type=' + 1 + '&library_name=' + item.library_name + '&tk_price=' + item.pay_price)
		}
  }
};
</script>
<style>
page {
  background: #f6f7f9;
}
.index-tiku {
  background: #fff;
}
.index-tiku-content {
  width: 92%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  padding: 14px 0;
  border-bottom: solid 1px #f5f5f5;
}
.index-tiku-content-flex {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.index-tiku-content-flex .pub-gray {
  font-size: 14px;
}
.index-tiku-content .index-tiku-content-flex:first-child {
  padding-bottom: 6px;
}
.index-tiku-content .index-tiku-content-flex:last-child {
  font-size: 14px;
}
.index-tiku-content-top {
  display: flex;
  align-items: center;
	width: 76%;
}
.index-tiku-content-top img {
  width: 18px;
  height: 20px;
  margin-right: 10px;
}
.index-tiku-content-bottom {
  display: flex;
  align-items: center;
}
.index-tiku-content-flex .icon-dui {
  margin: 2px 2px 0 0;
  color: #3c7bfc;
}
/*课程列表*/
.index-content-qy {
  padding-top: 12px;
  width: 93%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.index-content-qy .video-content {
  margin-bottom: 13px;
  display: flex;
  align-items:self-start;
  padding-top: 0;
  border-bottom: solid 1px #f5f5f5;
  padding-bottom: 13px;
}
.index-content-qy .video-content:last-child {
  border-bottom: none!important;
  padding-bottom: 0;
}
.video-content-img {
  width: 127px;
  height: 82px;
  border-radius: 5px;
}
.video-content-flex {
  display: flex;
  flex-direction: column;
  align-items: start;
  text-align: left;
  flex: 1;
  padding-left: 12px;
  height: 82px;
  justify-content: space-between;
}
.video-content-h1 {
  color: #000;
  font-size: 16px;
  line-height: 20px;
  padding-bottom: 4px;
}
.video-content-about {
  font-size: 14px;
  color: #bdbdbd;
  display: flex;
  align-items: center;
}
.video-content-learn {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}
.video-content-price {
  color: #c3c3c3;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.video-free {
  font-size: 16px;
}
.video-content-button {
  font-size: 14px;
  background: #3c7bfc;
  color: #000;
  padding: 5px 12px;
  border-radius: 16px 16px 16px 0;
}
.lz-icon-close{
  font-size: 20px;
  color: #7d7d7d;
}
.lz-title{
  flex: 1;
  text-align: center;
  font-size: 17px;
}
</style>
